"use client";

import {
  BoldIcon,
  Code2Icon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
  WandSparklesIcon,
} from "lucide-react";
import { KEYS } from "platejs";
import { useEditorReadOnly } from "platejs/react";

import { AIToolbarButton } from "./ai-toolbar-button";
import { InlineEquationToolbarButton } from "./equation-toolbar-button";
import { FontFamilyToolbarButton } from "./font-family-toolbar-button";
import { LinkToolbarButton } from "./link-toolbar-button";
import { MarkToolbarButton } from "./mark-toolbar-button";
import { MoreToolbarButton } from "./more-toolbar-button";
import { ToolbarGroup } from "./toolbar";
import { TurnIntoToolbarButton } from "./turn-into-toolbar-button";

export function FloatingToolbarButtons() {
  const readOnly = useEditorReadOnly();

  return (
    &lt;&gt;
      {!readOnly && (
        &lt;&gt;
          &lt;ToolbarGroup&gt;
            &lt;AIToolbarButton tooltip="AI commands"&gt;
              &lt;WandSparklesIcon /&gt;
              Ask AI
            &lt;/AIToolbarButton&gt;
          &lt;/ToolbarGroup&gt;

          &lt;ToolbarGroup&gt;
            &lt;TurnIntoToolbarButton /&gt;

            &lt;FontFamilyToolbarButton /&gt;

            &lt;MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)"&gt;
              &lt;BoldIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)"&gt;
              &lt;ItalicIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton
              nodeType={KEYS.underline}
              tooltip="Underline (⌘+U)"
            &gt;
              &lt;UnderlineIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton
              nodeType={KEYS.strikethrough}
              tooltip="Strikethrough (⌘+⇧+M)"
            &gt;
              &lt;StrikethroughIcon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)"&gt;
              &lt;Code2Icon /&gt;
            &lt;/MarkToolbarButton&gt;

            &lt;InlineEquationToolbarButton /&gt;

            &lt;LinkToolbarButton /&gt;
            {!readOnly && &lt;MoreToolbarButton /&gt;}
          &lt;/ToolbarGroup&gt;
        &lt;/&gt;
      )}
    &lt;/&gt;
  );
}
